<template>
  <div class="dashboard-container">
    <div class="delivery-form">
      <el-form ref="deliveryForm" label-position="top" label-width="90px" :model="deliveryForm" :rules="deliveryRules">
        <el-row :gutter="30">
          <el-col :span="9">
            <el-form-item label="任务号" prop="taskCode">
              <el-input v-model.trim="deliveryForm.taskCode" placeholder="请输入任务号" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="用户权限" prop="uname">
              <el-select v-model="deliveryForm.uname" placeholder="请选择" @change="handleUsenameChange">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.uygxm" :value="item.uname" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="产品名称" prop="productName">
              <el-select v-model="deliveryForm.productName" placeholder="请选择" @change="handleProductNameChange">
                <el-option v-for="item in productNameList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="产品代号" prop="productCode">
              <el-select v-model="deliveryForm.productCode" placeholder="请选择" @change="handleProductCodeChange">
                <el-option v-for="item in productCodeList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-for="item in fieldsMap" :key="item.value" :span="9">
            <el-form-item :label="item.label" :prop="item.value" :class="{important: ['wjPos','cskP','productD'].includes(item.value)}">
              <el-input v-model.number="deliveryForm[item.value]" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="18">
            <el-form-item style="margin-top: 20px; text-align: center;">
              <el-button type="primary" @click="delivery">下 发</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import { fieldsMap } from '@/utils/constant'
import { sendTask, getUsers } from '@/api/delivery'
import { getProductList } from '@/api/product'
export default {
  name: 'Dashboard',
  data() {
    return {
      fieldsMap: fieldsMap,
      userList: [],
      productList: [],
      productNameList: [],
      productCodeList: [],
      rules: {
        task_code: [
          { required: true, message: '请输入任务号', trigger: 'change' }
        ]
      },
      deliveryForm: {
        taskCode: '',
        uname: '',
        productName: '',
        productCode: '',
        productL: '',
        productD: '',
        wjPos: '',
        safePosition: '',
        tolerance: '',
        hbmL: '',
        hbmW: '',
        hbmH: '',
        cskL: '',
        cskW: '',
        cskP: '',
        holeD: '',
        holeL: ''
      },
      deliveryRules: {
        taskCode: [
          { required: true, message: '请输入任务号', trigger: 'blur' }
        ],
        uname: [
          { required: true, message: '请选择用户权限', trigger: 'change' }
        ],
        productName: [
          { required: true, message: '请选择产品名称', trigger: 'change' }
        ],
        productCode: [
          { required: true, message: '请选择产品代号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  created() {
    getUsers().then(res => {
      this.userList = res
    })
    getProductList().then(res => {
      this.productList = res
      this.productNameList = Array.from(new Set(res.map(item => item.productName)))
      this.productCodeList = res.map(item => item.productCode)
    })
  },
  methods: {
    handleUsenameChange(value) {
      this.deliveryForm.upassword = this.userList.find(v => v.uname === value).upassword
    },
    handleProductNameChange(val) {
      this.productCodeList = this.productList.filter(item => item.productName === val).map(v => v.productCode)
      this.deliveryForm.productCode = ''
    },
    handleProductCodeChange(val) {
      const obj = this.productList.find(item => item.productCode === val)
      this.deliveryForm.productName = obj.productName
      Object.keys(obj).forEach(key => {
        if (key != 'xh') this.$set(this.deliveryForm, key, obj[key])
      })
    },
    async delivery() {
      try {
        await this.$refs['deliveryForm'].validate()
      } catch (err) {
        return false
      }
      let dto = { ...this.deliveryForm }
      dto.username = dto.uname
      dto.password = dto.upassword
      delete dto.uname
      delete dto.upassword
      sendTask(dto).then(res => {
        this.$message.success('下发成功')
        this.$refs['deliveryForm'].resetFields()
        this.deliveryForm = {
          taskCode: '',
          uname: '',
          productName: '',
          productCode: '',
          productL: '',
          productD: '',
          wjPos: '',
          safePosition: '',
          tolerance: '',
          hbmL: '',
          hbmW: '',
          hbmH: '',
          cskL: '',
          cskW: '',
          cskP: '',
          holeD: '',
          holeL: ''
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 49px;
  }
}
.task-select {
  width: 50%;
}
.el-col-9 {
  .el-input {
    width: 80%;
    ::v-deep {
    input[disabled="disabled"] {
      color: #303133;
    }
  }
  }
  .el-select {
    width: 80%;
  }
}
.important {
  ::v-deep {
    input[disabled="disabled"] {
      background-color: #fde2e2;
      color: #303133;
    }
  }
}
</style>
